<template>
    <div class="contain-box">
        <div class="box-header">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>商品管理</el-breadcrumb-item>
                <el-breadcrumb-item to="/attributes" replace>商品属性</el-breadcrumb-item>
                <el-breadcrumb-item>新增属性</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="box-body">
            <div class="box-nav">属性信息</div>
            <div class="body-set">
                <el-input v-model="name" placeholder="属性名称" style="width: 200px;margin-right: 20px"
                          size="small"></el-input>
            </div>
            <div class="box-nav" style="margin-top: 20px">属性值设置</div>
            <div class="body-add">
                <el-button type="primary" style="background-color: #1abc9c" size="mini" @click="add">新增属性值</el-button>
            </div>
            <div class="body-table">
                <el-table
                        :data="attributes"
                        size="small"
                        border
                        style="width: 50%">
                    <el-table-column
                            type="index"
                            label="序号"
                            width="100px"
                            align="center"
                    >
                    </el-table-column>
                    <el-table-column
                            label="属性值"
                            align="center"
                    >
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.name" placeholder="请输入属性值"
                                      size="mini"></el-input>
                            <!--                            <span v-else>{{scope.row.name}}</span>-->
                        </template>
                    </el-table-column>

                    <el-table-column
                            label="操作"
                            align="center"
                    >
                        <template slot-scope="scope">
                            <el-button size="small" type="text" @click="remove(scope.$index)">删 除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
        </div>
        <div class="box-submit">
            <div class="submit-left">
            </div>
            <div>
                <el-button size="small" @click="goBack">取 消</el-button>
                <el-button type="primary" @click="save" size="small" style="background-color: #1abc9c">保存并新增</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AddAttribute",
        data() {
            return {
                name: null,
                attributes: []
            }

        },
        methods: {
            remove(index) {
                this.attributes.splice(index, 1)
            },
            add() {
                this.attributes.push({name: ''})
            },
            goBack() {
                this.$router.go(-1)
            },
            save() {
                if (!this.name) {
                    return this.$message.warning('请输入属性名称')
                }
                if (!this.attributes || this.attributes.length === 0) {
                    return this.$message.warning('请输入属性值')
                } else {
                    for (let i = 0; i < this.attributes.length; i++) {
                        if (!this.attributes[i].name) {
                            return this.$message.warning('请输入属性值')
                        }
                    }
                }
                let obj = {}
                let arr = []
                for (let i = 0; i < this.attributes.length; i++) {
                    arr.push(this.attributes[i].name)
                }
                obj.attributeValue = arr
                obj.attributeName = this.name
                this.axios.post('/goodAttribute/save', obj).then(res => {
                    if (res.data.code === 200) {
                        this.$message.success('新增成功')
                        this.goBack()
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .contain-box {
        width: 100%;
        height: 100%;

        .box-header {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .box-body {
            width: 100%;
            border-radius: 5px;
            padding: 20px;
            box-sizing: border-box;
            box-shadow: 0 0 5px 0 #e4e4e4;

            .box-nav {
                width: 100%;
                height: 40px;
                line-height: 40px;
                padding-left: 10px;
                box-sizing: border-box;
                font-size: 14px;
                color: #666;
                border-left: 5px solid #1abc9c;
                background-color: #f9f9f9;
            }

            .body-top {
                width: 100%;
                height: 50px;
                text-align: center;
                line-height: 50px;
                border-bottom: 1px solid #e4e4e4;
                font-size: 20px;
                color: #666;
            }

            .body-set {
                margin-top: 20px;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
            }

            .body-add {
                margin-top: 20px;
                width: 100%;
            }

            .body-table {
                margin-top: 20px;
                width: 100%;
            }

            .body-message {
                margin-top: 20px;
                width: 100%;

                .message-box {
                    margin-top: 20px;
                    display: flex;
                    align-items: center;
                    cursor: pointer;

                    .message-img {
                        margin-left: 20px;
                        width: 20px;
                        height: 20px;
                    }

                    .message-son {
                        margin-right: 15px;
                        font-size: 14px;
                    }
                }
            }
        }

        .box-submit {
            margin-top: 20px;
            width: 100%;
            border-radius: 5px;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 0 5px 0 #e4e4e4;

            .submit-left {
                display: flex;
                font-size: 16px;

                p {
                    margin-right: 20px;

                    span {
                        color: red;
                        font-weight: bold;
                    }
                }
            }
        }
    }
</style>
